import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import LineDivider from "@/components/elements/LineDivider";
import WithAuth from "@/components/auth/WithAuth";
import { useEffect, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { useRouter } from "next/router";
import { useAuth } from "@/core/utils/auth";
import VariantCard from "@/components/variants/VariantCard";
import currencyFormat from "@/core/utils/currencyFormat";
import Disclosure from "@/components/elements/Disclosure";
import DescriptionRow from "@/components/elements/DescriptionRow";
import { CustomerSection } from "@/components/transactions/TransactionDetail";

export default function DetailTransactions() {
  const router = useRouter();
  const { id } = router.query;
  const [ auth ] = useAuth();
  const [ transaction, setTransaction ] = useState(null);
  const [ activeSection, setActiveSection ] = useState({
    purchase: false,
    shipping: false,
    invoice: false,
  });

  const toggleSection = ( name ) => {
    setActiveSection({
      ...activeSection,
      [name]: !activeSection[name] 
    });
  };

  useEffect(() => {
    if (auth) {
      const loadTransaction = async () => {
        const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
        setTransaction(dataTransaction);
      }
      loadTransaction();
    }
  }, [ auth, id ]);

  return (
    <WithAuth>
      <Layout className="pb-4">
        <AppBar title="Detail Transaksi" />
          
        <div className="p-4 flex flex-col gap-y-4">
          <DescriptionRow label="Status Transaksi">
            <span className="badge-green">Pending Quotation</span>
          </DescriptionRow>
          <DescriptionRow label="No Transaksi">
            { transaction?.name }
          </DescriptionRow>
          <DescriptionRow label="Purchase Order">
            { transaction?.po_name || '-' }
          </DescriptionRow>
          <DescriptionRow label="Ketentuan Pembayaran">
            { transaction?.payment_term }
          </DescriptionRow>
          <DescriptionRow label="Nama Sales">
            { transaction?.sales }
          </DescriptionRow>
          <DescriptionRow label="Waktu Transaksi">
            { transaction?.date_order }
          </DescriptionRow>
        </div>

        <LineDivider />

        <Disclosure 
          label="Detail Produk"
        />

        <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
          { transaction?.products?.map((product, index) => (
            <VariantCard
              key={index}
              data={product}
            />
          )) }
          <div className="flex justify-between mt-3 font-medium">
            <p>Total Belanja</p>
            <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
          </div>
        </div>


        <LineDivider />

        <Disclosure 
          label="Detail Pembeli" 
          active={activeSection.purchase} 
          onClick={() => toggleSection('purchase')} 
        />
        { activeSection.purchase && (
          <CustomerSection address={transaction?.address?.customer} />
        ) }

        <LineDivider />

        <Disclosure 
          label="Detail Pengiriman" 
          active={activeSection.shipping} 
          onClick={() => toggleSection('shipping')} 
        />
        { activeSection.shipping && (
          <CustomerSection address={transaction?.address?.shipping} />
        ) }

        <LineDivider />

        <Disclosure 
          label="Detail Penagihan" 
          active={activeSection.invoice} 
          onClick={() => toggleSection('invoice')} 
        />
        { activeSection.invoice && (
          <CustomerSection address={transaction?.address?.invoice} />
        ) }
      </Layout>
    </WithAuth>
  );
}